<!--
 * @Author: Mcc
 * @Date: 2024-07-30 16:13:56
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-29 19:55:48
 * @FilePath: \ft-apply-admin\src\views\UserPermissions\editAccount.vue
 * @Description:
 *
 * Copyright (c) 2024 by Mcc, All Rights Reserved.
-->
<template>
  <a-modal v-model:open="modalShow" centered width="560px">
    <template #closeIcon>
      <div class="close">
        <i class="iconfont icon-guanbi"></i>
      </div>
    </template>
    <template #title>
      <div class="title-box">
        <div class="title">编辑账号</div>
      </div>
    </template>
    <div class="content">
      <a-form ref="formRef" :model="formState" :rules="rules" :labelCol="labelCol">
        <a-form-item ref="userName" label="姓名" name="userName">
          <a-input readonly disabled v-model:value="formState.userName" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item ref="phone" label="手机号" name="phone">
          <a-input readonly disabled v-model:value="formState.phone" placeholder="请输入手机号" :maxlength="11" />
        </a-form-item>
        <a-form-item ref="role" label="角色" name="role">
          <a-select
            show-search
            v-model:value="formState.role"
            placeholder="请选择角色"
            :options="roleNames"
            optionFilterProp="label"
          ></a-select>

        </a-form-item>
        <a-form-item ref="identity" label="所属部门" name="identity">
          <a-tree-select
            show-search
            v-model:value="formState.identity"
            placeholder="请选择部门"
            tree-default-expand-all
            :tree-data="treeData"
            :replaceFields="{key:'id',title: 'label', value: 'id'}"
            @select="handleSelect"
            treeNodeFilterProp="label"
          >
            <template #title="{ value: val, label,id }">
              <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
              <template v-else>{{ label }}</template>
            </template>
          </a-tree-select>
        </a-form-item>
        <a-form-item ref="remark" label="备注" name="remark">
          <a-textarea
            v-model:value="formState.remark"
            placeholder="请输入"
            :auto-size="{ minRows: 2, maxRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <div class="footer">
        <Button class="edit-btn" color="#ABBACD" :loading="loading" @click="cancels">取消</Button>
        <Button class="edit-btn" type="primary" @click="handleOk">确定</Button>
      </div>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
  import { useI18n } from '@/hooks/web/useI18n'
  import { Button } from '@/components/Button'
  import { onMounted, ref } from "vue";
  import {Rule} from "ant-design-vue/es/form";
  import type { SelectProps,TreeSelectProps } from 'ant-design-vue';
  import { selectDeptTreeList,selectRoleList,updateAccount } from '@/api/userPer/detail.ts'
import { message } from 'ant-design-vue';
  const emit = defineEmits(['success']);
  const loading = ref(false);
  const { t } = useI18n()
  const formRef = ref<any>(null)
  const modalShow = ref<boolean>(false);
  const roleNames = ref<SelectProps['options']>();
  const roleNamesBack = ref("");
  const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  // 单位所属地区
  const regionOptions = [
    { label: '合肥', value: '1' },
    { label: '芜湖', value: '2' },
    { label: '安庆', value: '3' },
    { label: '马鞍山', value: '4' },
    { label: '新加坡', value: '5' }
  ];
  const treeData = ref<TreeSelectProps['treeData']>();
  const formState = ref({
    userName: '',
    phone: '',
    role: "",
    identity:'',
    //region:'',
    remark:'',
    userId:''
  })
  const labelCol = ref({
    xs: { span: 10 },
    sm: { span: 5 },
  })
  const rules: Record<string, Rule[]> ={
    name: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    phone: [{ required: true, message: '请输入手机号', trigger: 'change' }],
    role: [{ required: true, message: '请选择角色', trigger: 'change' }],
    identity: [{ required: true, message: '请选择HR身份', trigger: 'change' }],
    region: [{ required: true, message: '请选择单位所属地区', trigger: 'change' }]
  };
  const identityId = ref();
  //打开弹框重新渲染数据
  const open = async(data) => {
    console.log(data.value)
    modalShow.value = data.types;
    if(data.types){
      //formState.value = data.value
      //回显需要两个参数，一个用于后台使用depid，一个用于前端回显0-1这种
      identityId.value = data.value.deptId;
      roleNamesBack.value = data.value.deptName;
      console.log(typeof(data.value.roleId))
      //回显
      formState.value = {
        userName: data.value.userName,
        phone: data.value.phone,
        //role: String(data.value.roleId),
        identity:data.value.deptId,
        //region:'',
        remark:data.value.remark.length==undefined?"":data.value.remark,
        userId:data.value.userId
      }
      if(typeof(data.value.roleId)=='number'){
        formState.value.role=String(data.value.roleId)
      }
      //formState.value.remark = data.value.remark.length==undefined?"":data.value.remark;
    }
  };
  const cancels = () => {
    modalShow.value = false
  };

  const handleSelect = (selectedKeys, info)=>{
    console.log(selectedKeys, info)
    roleNamesBack.value = info.label;
    identityId.value = info.id;
  }
  //点击提交判定，然后调用接口
  const handleOk = async (val) => {
    const res = await formRef.value.validate();
    if (!res) return
    console.log(res,formState.value)
    //保存需要两个参数，一个用于后台使用depid，一个用于前端回显0-1这种
    const datas = await updateAccount({
      userId:formState.value.userId,//用户id
      deptId:identityId.value,//部门id
      remark:res.remark,//用户备注
      roleId:res.role,//角色id
    })
    if(datas!==null){
      emit('success')
    }else{
      message.error('系统繁忙，请稍后重试');
    }
    
    //if(datas!=null){
      
    //}
  }
  
  onMounted(async() => {
    const datas = await selectDeptTreeList();
    const rolaNameData = await selectRoleList()
    console.log(datas)
    treeData.value = datas;
    roleNames.value = rolaNameData
  });
  defineExpose({
    open
  });
</script>
<style lang="less" scoped>
  /*.close {
    margin-top: 7px;
  }*/

  /*.title-box {
    height: 68px;
    background: #F5F7FB;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .footer {
    text-align: center;
    padding: 12px;
  }

  .content {
    width: 100%;
    min-height: 100px;
    margin-top: 44px;
    padding: 0 20px;
    box-sizing: border-box;
    padding-top: 20px;
  }
  .edit-btn{
    width: 80px;
    height: 40px;
    border-radius: 3px;
  }*/
</style>
